<link rel="stylesheet" href="/canvas_drawing/css/drawing.css" type="text/css" media="all" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="/siglaz/shape.js"></script>
<script type="text/javascript" src="/siglaz/graphic.js"></script>
<script type="text/javascript" src="/siglaz/util.js"></script>
<div class="paint_area">
	<div class="propertive_area">
		
	</div>
	<div class="tool_area">
		<table>
			<tr>
				<td>
					<div class="button bt_select"></div>
				</td>
				<td>
					<div class="button bt_move"></div>
				</td>
			</tr>
			<tr>
				<td>
					<div class="button bt_line"></div>
				</td>
				<td>
					<div class="button bt_arc"></div>
				</td>
			</tr>
			<tr>
				<td>
					<div class="button bt_circle"></div>
					
				</td>
				<td>
					<div class="button bt_rectangle"></div>
				</td>
			</tr>
			<tr>
				<td>
					<div class="button bt_poligon"></div>
					
				</td>
				<td>
					<div class="button bt_text"></div>
				</td>
			</tr>
			<tr>
				<td>
					<div class="button bt_image"></div>
				</td>
				<td>
					<div class="button bt_hand"></div>
				</td>
			</tr>
			<tr>
				<td>
					<div class="button bt_pen"></div>
				</td>
				<td>
					<div class="button bt_brush"></div>
				</td>
			</tr>
			<tr>
				<td>
					<div class="button bt_zoom_in"></div>
				</td>
				<td>
					<div class="button bt_zoom_out"></div>
				</td>
			</tr>
		</table>
	</div>
	<div class="drawing_area" id="drawing_area" style="width: 800px; height: 600px;">
		
	</div>
</div>
<script>
	Drawing = {};
	Drawing.Form = {
		graphic: null,
		selected_tool: null,
		init: function(){
			$('.tool_area .button').click(function(){
				console.log(this);
				$('.tool_area .button').removeClass('active');
				$(this).addClass('active');
			});
			var canvasElement = document.getElementById('drawing_canvas');
			var context = canvasElement.getContext("2d");
			Drawing.Form.graphic = new Siglaz.Graphic(context);
		}
	};
	Drawing.Line = {
		draw: function(){
			
		}
	};
	$(document).ready(function(){
		//Drawing.Form.init();
	});
</script>

<!--
	For testing
-->

<script>
window.onload = function(){
	context = null;
	graphics = null;
	//canvasElement = document.getElementById('drawing_area');
	//context = canvasElement.getContext("2d");
	graphics = new Siglaz.Graphic("drawing_area");
		
		// Create some instances and see the overridden behavior.
	c = new Siglaz.Circle({x: 200, y: 100, r: 50});
	c.setStrokeColor("blue");
	//c.setFillColor("green");
	c.setStrokeWidth(2);
	graphics.add(c);
	
	l = new Siglaz.Line({
		points: [{
			x: 150,
			y: 200
		}, {
			x: 190,
			y: 330
		}]
	});
	l.setStrokeColor("red");
	l.setStrokeWidth(2);
	l.setLineCap("round");
	//l.setRotateRad(Math.PI/4);
	l.rotateDeg(90);
	
	graphics.add(l);
		
	r = new Siglaz.Rectangle({top: 300, left:400, width: 20, height:30, cornerRadius: 0});
	r.setStrokeColor("purple");
	
	//graphics.parseShapeFromJson('[{"_objectType":"Circle","_attrs":{"x":200,"y":100,"r":50},"_options":{"matrix":[1,0,0,1,0,0],"stroke":{"color":"blue","type":"line","width":2},"fill":{"color":"none"},"visible":true,"selected":false,"selectable":true}},{"_objectType":"Line","_attrs":{"points":[{"x":10,"y":20},{"x":50,"y":150}],"lineCap":"butt"},"_options":{"matrix":[1,0,0,1,0,0],"stroke":{"color":"black","type":"line","width":1},"fill":null,"visible":true,"selected":false,"selectable":true}}]');		
	i = new Siglaz.Image({
		src: "http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg",
		top: 100,
		left: 400,
		width: 200,
		height: 100,
		crop:{
			top: 50,
			left: 50,
			width: 100,
			height: 100
		}
	});
	
	i.rotateDeg(135);

	graphics.add(i);
	
	p = new Siglaz.Polygon({
		points: [{
			x: 600,
			y: 400
		}, {
			x: 500,
			y: 400
		}, {
			x: 400,
			y: 500
		}, {
			x: 700,
			y: 500
		}]
	})
	p.setFillColor("orange");
	p.setStrokeWidth(1);
	p.setLineCap("butt");
	p.rotateDeg(45);
	//p.rotateDeg(90);
	
	p.on("click", function(){
		console.log("bat dc ne pa");
	});
	
	graphics.add(p);
	
	//setInterval(function(){
		graphics.draw();
	//},60);
}
</script>
